@charset "utf-8";
@import 'reset';

.boundary {
    width: 100vw;
    background-color: rgb(234, 237, 240);

    //头部
    .head {
        width: 100vw;
        height: 13.8667vw;
        background-color: #ffffff;
        border-bottom: 1px solid #E4E4E4;
        position: fixed;
        display: flex;
        z-index: 2;
        margin-top: -13.8667vw;

        .arrow {
            width: 2.6667vw;
            height: 2.6667vw;
            border: .2667vw solid rgb(0, 0, 0);
            border-top: transparent;
            border-right: transparent;
            transform: rotate(50deg);
            // position: absolute;

            margin-top: 5.3333vw;
            margin-left: 4vw;
        }

        .text {
            width: 12.8vw;
            height: 5.8667vw;
            color: #555555ff;
            font-size: 4.2667vw;
            margin: auto;

        }
    }

    //购物车
    .content {
        width: 100vw;
        background-color: #ffffff;
        margin-top: 13.8667vw;

        .happiness-box {
            width: 100vw;
            height: 45.6vw;
            border-bottom: .2667vw solid #ccccccff;
            border-top: .2667vw solid #ccccccff;

            display: flex;
            position: relative;

            input {
                position: absolute;
                top: 22.2667vw;
                left: 2.6667vw;
            }

            .happiness-img {
                width: 35.4133vw;
                height: 35.4133vw;
                // border: .2667vw dotted #000;
                position: absolute;
                top: 4vw;
                left: 8.8vw;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .happiness-text {
                width: 53.12vw;
                height: 33.384vw;
                position: absolute;
                top: 7.3093vw;
                left: 46.88vw;

                h3 {
                    font-size: 4.2667vw;
                    position: absolute;
                    color: #333333ff;
                    top: 6.4507vw;
                }

                p {
                    font-size: 3.7333vw;
                    position: absolute;
                    top: 14.984vw;
                    color: #555555ff;
                }

                .market {
                    color: #555555ff;
                    font-size: 3.7333vw;
                    position: absolute;
                    top: 21.6507vw;

                    .rmb {
                        color: #c1c3c5;
                        text-decoration: line-through;
                    }
                }

                .shop {
                    font-size: 3.7333vw;
                    color: #555555ff;
                    position: absolute;
                    top: 28.3173vw;

                    .rmb {
                        color: #ff2222ff;
                    }
                }

            }
        }
    }

    //猜你喜欢
    .guessyli {
        width: 100vw;
        margin-top: 2.1333vw;
        background-color: rgb(247, 248, 248);

        .guessyli-text {
            height: 14.6667vw;
            position: relative;

            span {
                position: absolute;
                font-size: 4.6667vw;
                line-height: 14.6667vw;
                left: 4vw;
            }
        }

        .guessyli-img {
            width: 100vw;
            display: flex;
            justify-content: space-around;

            #recommend {
                width: 44vw;
                height: 62.6667vw;
                color: white;
                box-shadow: -0.5333vw 2.6667vw 2.6667vw -3.2vw rgb(112, 112, 112), .5333vw .5333vw 1.3333vw -0.8vw rgb(112, 112, 112);

                .box {
                    background-color: rgb(255, 255, 255);
                    width: 44vw;
                    height: 62.6667vw;

                    .picture {
                        width: 44vw;
                        height: 44vw;
                        // border: .2667vw dashed #000;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .eternity {
                        height: 18.6667vw;
                        width: 44vw;
                        position: relative;


                        h3 {
                            margin-top: 5.0667vw;
                            margin-left: 2.6667vw;
                            color: #333333ff;
                            font-size: 3.7333vw;
                        }

                        .rmb {
                            position: absolute;
                            left: 1.3333vw;
                            top: 6.6667vw;
                            font-size: 3.7333vw;
                            color: #ff734cff;

                        }

                        .salesv {
                            position: absolute;
                            left: 24.328vw;
                            color: #999999ff;
                            font-size: 12px;
                            top: 6.6667vw;
                        }
                    }
                }
            }

        }

        .guessyli-img-two {
            margin-top: 2.6667vw;
        }

        .blank {
            width: 100vw;
            height: 26.6667vw;
        }
    }

    // 结算
    .bottom {
        width: 100vw;
        height: 13.3333vw;
        border: .2667vw solid red;
        background-color: #ffffff;
        position: fixed;
        display: flex;
        margin-top: 564px;
        z-index: 2;

        span {
            color: #884E22;
            font-size: 3.7333vw;
            line-height: 13.3333vw;
            margin-left: 4vw;
        }

        .clearing {
            width: 27.872vw;
            height: 13.3333vw;
            background-color: #884E22;
            position: absolute;
            left: 72.128vw;

            span {
                font-size: 14px;
                color: rgb(255, 255, 255);
            }
        }
    }

}